<template>
  <div class="consult-dep-page">
    <nav-bar title="选择科室" />
    <div class="wrapper">
      <van-sidebar v-model="active">
        <van-sidebar-item
          v-for="item in list"
          :key="item.id"
          :title="item.name"
        />
      </van-sidebar>
      <div class="sub-dep">
        <router-link
          to="/consult/illness"
          v-for="sub in list[active]?.child"
          :key="sub.id"
          @click="consult.setDepId(sub.id)"
          >{{ sub.name }}</router-link
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ApiRes } from '@/types/data'
import { Dep } from '@/types/dep'
import request from '@/utils/request'
import { onMounted, ref } from 'vue'
import useStore from '@/store'
const { consult } = useStore()
const active = ref(0)
const list = ref([] as Dep[])
const loadData = async () => {
  const res = await request.get<ApiRes<Dep[]>>('dep/all')

  if (res.data.code === 10000) {
    list.value = res.data.data
  }
}
onMounted(() => loadData())
</script>

<style lang="scss" scoped>
.consult-dep-page {
  padding-top: 46px;
  .wrapper {
    height: calc(100vh - 46px);
    overflow: hidden;
    display: flex;
    .van-sidebar {
      width: 114px;
      &-item {
        padding: 14px;
        color: var(--cp-tag);
        &--select {
          color: var(--cp-main);
          font-weight: normal;
          &::before {
            display: none;
          }
        }
      }
    }
    .sub-dep {
      flex: 1;
      height: 100%;
      overflow-y: auto;
      > a {
        display: block;
        padding: 14px 30px;
        color: var(--cp-dark);
      }
    }
  }
}
</style>
